import React from 'react'
import NavbarCom from '../components/NavbarCom'

import { Image } from 'antd-mobile'

import { useEffect, useState } from 'react'
import { serviceList } from "../service/homeService"
import { useNavigate } from 'react-router-dom'

export default function Service() {
  let navigate = useNavigate()
  const [list, setlist] = useState<any>([])
  let getInit = async () => {
    let res = await serviceList({})
    console.log(res.data.rows);
    setlist(res.data.rows)
  }

  useEffect(() => {
    getInit()
  }, [])

  let gotoPath = (item: any) => {
    navigate("/" + item.link);
  }

  return (
    <div className='service-all'>
      <NavbarCom children={"更多服务"} backArrow={false}></NavbarCom>
      <div className='service-main' >
        {
          list.map((item: any) => {
            return <li key={item.id} onClick={() => {
              gotoPath(item);
            }}>
              <Image src={"/api2" + item.imgUrl}></Image>
              <p>{item.serviceName}</p>
            </li>
          })
        }
      </div>
    </div>
  )
}
